<template>
<section @click="clickCurrent('current')" @mousedown="clickCurrent('dragging')">
    <div :class="['custorm--modelbox', 'goodscol-show', (custormCurrent == custormIndex)?'drag active':'drag']">
        <div v-if="custormItemData.params.isshow == '2'" class="noshow" v-bind:style="{'background-image':`url(${getPath('noshow.png')})`}"></div>
        <!-- v-if="custormItemData.style.display == '1'" -->
        <!-- 标题 -->
        <div :style="{'padding':custormItemData.style.margincol+'px '+custormItemData.style.marginrow+'px'}" class="caption">
                <div v-if="custormItemData.params.goodstitle=='1'">
                    <!-- 样式一 -->
                    <div>
                        <!-- {{custormItemData.params.titlestyle}} -->
                        <!-- {{custormItemData.style.display}} -->
                        <div class="flex-row flex-justify-b flex-align-c" v-if="custormItemData.params.titlestyle=='1' && custormItemData.style.display !='5'">
                            <!-- {{custormItemData.style}} -->
                            <!-- {{custormItemData.style.subtext}} -->

                                <div class="title-content">
                                    <div
                                        class="main-title"
                                        :style="{'color':custormItemData.style.maincolor}"
                                        style="font-weight: normal;font-size: 20px;"
                                    >{{custormItemData.params.maintext}}</div>
                                    <div
                                        class="sub-title"
                                        :style="{'color':custormItemData.style.subcolor}"
                                    >{{custormItemData.params.subtext}}</div>
                                </div>
                            <div
                                class="title-more"
                                v-if="custormItemData.params.newest=='2' && custormItemData.params.showmore=='1' && custormItemData.style.display!='5'"
                             :style="{'color':custormItemData.style.morecolor}">查看更多<i class="el-icon-arrow-right"></i></div>
                            <div  v-if="custormItemData.params.newest=='1'&& custormItemData.style.display!='5'">
                                <!-- v-if="custormItemData.params.prior==1" -->
                                <div style="display:flex;border:1px solid rgba(255,217,64,1);" v-if="custormItemData.params.prior==1">
                                     <div style="background: #FFD940;padding: 5px;" v-if="custormItemData.params.sortcustorm=='shelf_time'">最新</div>
                                     <div style="background: #FFD940;padding: 5px;" v-if="custormItemData.params.sortcustorm=='all'">综合</div>
                                     <div style="background: #FFD940;padding: 5px;" v-if="custormItemData.params.sortcustorm=='sales'">最热</div>

                                     <div style="background: #FFD940;padding: 5px;" v-if="custormItemData.params.sortcustorm=='desc_price'">最新</div>
                                     <div style="background: #FFD940;padding: 5px;" v-if="custormItemData.params.sortcustorm=='asc_price'">最新</div>
                                     <div style="background: #FFD940;padding: 5px;" v-if="custormItemData.params.sortcustorm=='view_num'">最新</div>
                                     <div style="background: #FFD940;padding: 5px;" v-if="custormItemData.params.sortcustorm=='pay_num'">最新</div>
                                     <div style="padding:5px;">附近</div>
                                  
                                </div>
                                <div style="display:flex;border:1px solid rgba(255,217,64,1);" v-if="custormItemData.params.prior==2">
                                     <div style="background: #FFD940;padding: 5px;">附近</div>
                                    <div style="padding: 5px;" v-if="custormItemData.params.sortcustorm=='shelf_time'">最新</div>
                                    <div style="padding: 5px;" v-if="custormItemData.params.sortcustorm=='all'">综合</div>
                                    <div style="padding: 5px;" v-if="custormItemData.params.sortcustorm=='sales'">最热</div>

                                    <div style="padding: 5px;" v-if="custormItemData.params.sortcustorm=='desc_price'">最新</div>
                                    <div style="padding: 5px;" v-if="custormItemData.params.sortcustorm=='asc_price'">最新</div>
                                    <div style="padding: 5px;" v-if="custormItemData.params.sortcustorm=='view_num'">最新</div>
                                    <div style="padding: 5px;" v-if="custormItemData.params.sortcustorm=='pay_num'">最新</div>
                                </div>
                            </div>
                        </div>
                           <div v-if="custormItemData.params.advertisement=='1'&& custormItemData.params.titlestyle=='1' && custormItemData.style.display!='5'">
                                <img style="width:100%;height:175px;" :src="getPath(!!custormItemData.params.thumb? custormItemData.params.thumb.file_path :'default_picture.png')" >
                                 <!-- <img style="display: inline-flex;margin-left:5px;height: 20px;vertical-align: text-bottom;" src="@/assets/custorm_style/vipIcon.png" /> -->
                                <!-- <img :src="`${custormItemData.params.choostype != '1'?getPath('default_picture.png'):_citem.edit?getPath(_citem.edit.thumb):_citem.file_path}`" alt="" draggable="false"> -->
                            </div>
                    </div>
                     <!-- 样式二 -->
                     <div v-if="custormItemData.params.titlestyle=='2' && custormItemData.style.display !='5'">
                         <div class="flex-row flex-justify-b flex-align-c" >
                            <div class="title-content">
                                <div
                                    class="main-title"
                                    :style="{'color':custormItemData.style.maincolor}"
                                    style="font-weight: normal;font-size: 20px;"
                                >{{custormItemData.params.maintext}}</div>
                            </div>
                        <div class="title-more" v-if="custormItemData.params.newest=='2' && custormItemData.params.showmore=='1'" :style="{'color':custormItemData.style.morecolor}">查看更多<i class="el-icon-arrow-right"></i></div>
                            <div v-if="custormItemData.params.newest=='1'">
                                   <div style="display:flex;border:1px solid rgba(255,217,64,1);" v-if="custormItemData.params.prior==1">
                                     <div style="background: #FFD940;padding: 5px;">最新</div>
                                    <div style="padding: 5px;">最近</div>
                                </div>
                                   <div style="display:flex;border:1px solid rgba(255,217,64,1);" v-if="custormItemData.params.prior==2">
                                     <div style="background: #FFD940;padding: 5px;">最近</div>
                                    <div style="padding: 5px;">最新</div>
                                </div>
                            </div>
                        </div>
                        <div v-if="custormItemData.params.advertisement=='1' && custormItemData.params.titlestyle=='2'">
                                <img style="width:100%;height:175px;" :src="getPath(custormItemData.params.thumb.file_path)" >
                                 <!-- <img style="display: inline-flex;margin-left:5px;height: 20px;vertical-align: text-bottom;" src="@/assets/custorm_style/vipIcon.png" /> -->
                                <!-- <img :src="`${custormItemData.params.choostype != '1'?getPath('default_picture.png'):_citem.edit?getPath(_citem.edit.thumb):_citem.file_path}`" alt="" draggable="false"> -->
                            </div>
                     </div>
                     <!-- 样式三 -->
                      <div class="flex-row flex-justify-b flex-align-c" v-if="custormItemData.params.titlestyle=='3' && custormItemData.style.display!='5'">
                                    <div style="position: relative;">
                                        <div v-if="custormItemData.params.advertisement=='1'">
                                            <img style="width:100%;height:80px;" :src="getPath(custormItemData.params.thumb.file_path)">
                                        </div>
                                <div
                                    class="title-more"
                                    style="position: absolute;top:25px;right:0px;"
                                    v-if="(custormItemData.params.titlestyle == '3' && custormItemData.params.advertisement == '1' && custormItemData.params.showmore == '1') || ((custormItemData.params.titlestyle == '1' ||custormItemData.params.titlestyle == '2') && custormItemData.params.newest=='2' && custormItemData.params.showmore=='1')"
                                    :style="{'color':custormItemData.style.morecolor}">查看更多<i class="el-icon-arrow-right"></i>

                                </div>
                                <div v-if="(custormItemData.params.titlestyle == '3' && custormItemData.params.advertisement == '1' && custormItemData.params.newest == '1') || ((custormItemData.params.titlestyle == '1' ||custormItemData.params.titlestyle == '2') &&  custormItemData.params.newest=='1' && custormItemData.params.showmore=='2')" style="position: absolute;top:25px;right:0px;">
                                    <div style="display:flex;border:1px solid rgba(255,217,64,1);" >
                                        <!-- <div style="background: #FFD940;padding: 5px;" :style="{'color':custormItemData.style.selectcolor,'background':custormItemData.style.backgcolor}">最新</div>
                                        <div style="padding: 5px;" :style="{'color':custormItemData.style.unselectcolor,'background':custormItemData.style.unbackgcolor}">最近</div> -->
                                           <div style="display:flex;border:1px solid rgba(255,217,64,1);" v-if="custormItemData.params.prior==1">
                                                <div style="background: #FFD940;padding: 5px;" :style="{'color':custormItemData.style.selectcolor,'background':custormItemData.style.backgcolor}">最新</div>
                                                <div style="padding: 5px;" :style="{'color':custormItemData.style.unselectcolor,'background':custormItemData.style.unbackgcolor}">最近</div>
                                            </div>
                                            <div style="display:flex;border:1px solid rgba(255,217,64,1);" v-if="custormItemData.params.prior==2">
                                                <div style="background: #FFD940;padding: 5px;" :style="{'color':custormItemData.style.selectcolor,'background':custormItemData.style.backgcolor}">最近</div>
                                                <div style="padding: 5px;" :style="{'color':custormItemData.style.unselectcolor,'background':custormItemData.style.unbackgcolor}">最新</div>
                                            </div>
                                    </div>
                                </div>
                            </div>
                      </div>
                      <!-- 当开启三排风格后，只有样式1和样式2，并且在开启广告位时，广告位商圈有标题 这是样式1-->
                      <!-- v-if="custormItemData.style.display=='5' && custormItemData.params.advertisement=='1' && custormItemData.params.titlestyle=='1'" -->
                        <div  v-if="custormItemData.style.display=='5' && custormItemData.params.advertisement=='1' && custormItemData.params.titlestyle=='1' ">
                              <div >
                             <div v-if="custormItemData.params.advertisement=='1'&& custormItemData.params.titlestyle=='1'" style="position: relative;">
                                    <img style="width:100%;height:80px; " :src="getPath(custormItemData.params.thumb.file_path)" v-if="custormItemData.params.advertisement=='1'">
                                      <div class="title-content" style="position: absolute;bottom:0px;background:#fff;margin-left:20px;width:300px;">
                                          <div class="flex-row flex-justify-b flex-align-c">
                                              <div>
                                                   <div
                                                            class="main-title line-hide"
                                                            :style="{'color':custormItemData.style.maincolor}"
                                                            style="font-weight: normal;font-size: 20px; width:220px;"
                                                        >{{custormItemData.params.maintext}}</div>
                                                        <div
                                                            class="sub-title"
                                                            :style="{'color':custormItemData.style.subcolor}"
                                                        >{{custormItemData.params.subtext}}</div>

                                              </div>
                                              <div>
                                                  <div
                                            class="title-more"
                                            v-if="custormItemData.params.newest=='2' && custormItemData.params.showmore=='1' "
                                        :style="{'color':custormItemData.style.morecolor}">查看更多<i class="el-icon-arrow-right"></i></div>

                                        <div style="display:flex;border:1px solid rgba(255,217,64,1);" v-if="custormItemData.params.newest=='1'&& custormItemData.params.showmore=='1'">
                                            <div style="background: #FFD940;padding: 5px;">最新</div>
                                            <div style="padding: 5px;">最近</div>
                                            <!-- <div style="display:flex;border:1px solid rgba(255,217,64,1);" v-if="custormItemData.params.prior==1">
                                                <div style="background: #FFD940;padding: 5px;">最新</div>
                                                <div style="padding: 5px;">最近</div>
                                            </div>
                                            <div style="display:flex;border:1px solid rgba(255,217,64,1);" v-if="custormItemData.params.prior==2">
                                                <div style="background: #FFD940;padding: 5px;">最近</div>
                                                <div style="padding: 5px;">最新</div>
                                            </div> -->
                                        </div>
                                              </div>
                                          </div>
                                        </div>
                                    </div>
                             </div>
                        </div>
                        <div v-if="custormItemData.style.display=='5' && custormItemData.params.advertisement=='2' && custormItemData.params.titlestyle=='1' ">
                            <div class="flex-row flex-justify-b flex-align-c">
                                <div class="title-content">
                                    <div
                                        class="main-title"
                                        :style="{'color':custormItemData.style.maincolor}"
                                        style="font-weight: normal;font-size: 20px;"
                                    >{{custormItemData.params.maintext}}</div>
                                    <div
                                        class="sub-title"
                                        :style="{'color':custormItemData.style.subcolor}"
                                    >{{custormItemData.params.subtext}}</div>
                                </div>
                                  <div
                                class="title-more"
                                 v-if="custormItemData.params.newest=='2' && custormItemData.params.showmore=='1' && custormItemData.style.display=='5'"
                             :style="{'color':custormItemData.style.morecolor}">查看更多<i class="el-icon-arrow-right"></i></div>
                            <div style="display:flex;border:1px solid rgba(255,217,64,1);" v-if="custormItemData.params.newest=='1'&& custormItemData.params.showmore=='1'&& custormItemData.style.display=='5'">
                                <div style="background: #FFD940;padding: 5px;">最新</div>
                                <div style="padding: 5px;">最近</div>
                            </div>
                            </div>
                        </div>
                         <!-- 当开启三排风格后，只有样式1和样式2，并且在开启广告位时，广告位商圈有标题 这是样式2-->
                          <div  v-if="custormItemData.style.display=='5' && custormItemData.params.advertisement=='1' && custormItemData.params.titlestyle=='2' ">
                              <div >
                             <div v-if="custormItemData.params.advertisement=='1'&& custormItemData.params.titlestyle=='2'" style="position: relative;">
                                    <img style="width:100%;height:80px; " :src="getPath(custormItemData.params.thumb.file_path)" v-if="custormItemData.params.advertisement=='1'">
                                      <div class="title-content" style="position: absolute;bottom:0px;background:#fff;margin-left:20px;width:300px;">
                                          <div class="flex-row flex-justify-b flex-align-c" style="height:50px;">
                                                   <!-- <div style="width:200px;background:#FFD940;position: absolute;top:0px;">123</div>
                                                    style="position: relative;"-->

                                              <div style="position: relative;" >
                                                   <div
                                                    class="main-title line-hide"
                                                    :style="{'color':custormItemData.style.maincolor}"
                                                   style="font-weight: normal;font-size: 20px; position: absolute;bottom:0px;width:200px;">{{custormItemData.params.maintext}}</div>
                                                    <div style="width:200px;height:10px; background:#FFD940;"></div>
                                              </div>
                                              <div>
                                                  <div
                                            class="title-more"
                                            v-if="custormItemData.params.newest=='2' && custormItemData.params.showmore=='1' "
                                        :style="{'color':custormItemData.style.morecolor}">查看更多<i class="el-icon-arrow-right"></i></div>

                                        <div style="display:flex;border:1px solid rgba(255,217,64,1);" v-if="custormItemData.params.newest=='1'&& custormItemData.params.showmore=='1'">
                                            <div style="background: #FFD940;padding: 5px;">最新</div>
                                            <div style="padding: 5px;">最近</div>
                                        </div>
                                              </div>
                                          </div>
                                        </div>
                                    </div>
                             </div>

                          </div>
                           <div  v-if="custormItemData.style.display=='5' && custormItemData.params.advertisement=='2' && custormItemData.params.titlestyle=='2' ">
                                 <div class="flex-row flex-justify-b flex-align-c" >
                            <div class="title-content">
                                <div
                                    class="main-title"
                                    :style="{'color':custormItemData.style.maincolor}"
                                    style="font-weight: normal;font-size: 20px;"
                                >{{custormItemData.params.maintext}}</div>
                            </div>
                        <div class="title-more" v-if="custormItemData.params.newest=='2' && custormItemData.params.showmore=='1'" :style="{'color':custormItemData.style.morecolor}">查看更多<i class="el-icon-arrow-right"></i></div>
                            <div style="display:flex;border:1px solid rgba(255,217,64,1);" v-if="custormItemData.params.newest=='1'&& custormItemData.params.showmore=='1'">
                                <div style="background: #FFD940;padding: 5px;">最新</div>
                                <div style="padding: 5px;">最近</div>
                            </div>
                        </div>
                           </div>

                </div>

        </div>
        <div :style="{'padding':custormItemData.style.margincol+'px '+custormItemData.style.marginrow+'px'}" v-if="custormItemData.style.display == '1'" v-for="(_citem, _cindex) in (custormItemData.params.choostype == '2'||custormItemData.params.choostype == '3')? custormItemData.params.listitem:custormItemData.data && custormItemData.data.length>0?custormItemData.data:custormItemData.params.defaultData" :key="_cindex">
            <div class="es-goods-group  one block">
                <div>
                    <div class="es-goods-item">
                        <div :class="['image',custormItemData.style.icon=='2'?'showIcon':'']" style="overflow:hidden">
                            <div
                              style="position:absolute;top:0px; background:linear-gradient(50deg,rgba(255,68,68,1) 0%,rgba(253,113,55,1) 100%); 
                                        width:52px;height:20px;line-height:20px;display:flex;color:#fff;font-size:10px;border-radius:0px 0px 5px 0px;"
                                                         v-if="custormItemData.style.charges=='1'"><div style="margin-left:4px;">{{custormItemData.style.commission}}</div>￥100</div>
                            <div class="qglist-i-t-bar" v-if="custormItemData.style.user === '1'">
                                <div class="qglist-i-t-bar-d">
                                    <div class="qglist-i-t-bar-r">

                                    </div>
                                </div>
                            </div>

                           
                            <div v-bind:style="{'height': '175px','background-image': `url(${custormItemData.params.choostype != '1'?getPath('default_picture.png'):_citem.edit?getPath(_citem.edit.thumb):_citem.file_path})`}">
                                <img src="../../assets/image/yishouqing.png" v-if="custormItemData.params.soldout=='1'" style="position: absolute;">
                            </div>
                        </div>
                        <div class="detail">
                            <div class="name line-hide display-1" style="margin-bottom:10px;" v-if="custormItemData.style.name === '1'">
                                <i class="icon-tip" v-if="custormItemData.style.icon=='2'">{{custormItemData.style.icontext}}</i>
                                {{custormItemData.params.choostype != '1'?'这里是商品标题':_citem.edit?_citem.edit.name:_citem.goods_name}}
                            </div>
                           <!-- <div style="display: flex;" class="flex-align-c">
                                <div class="name line-hide display-1" style="margin-bottom:10px;" v-if="custormItemData.style.name === '1'">
                                <i class="icon-tip" v-if="custormItemData.style.icon=='2'">{{custormItemData.style.icontext}}</i>
                                {{custormItemData.params.choostype != '1'?'这里是商品标题':_citem.edit?_citem.edit.name:_citem.goods_name}}
                                </div>
                            <div style="background:#FFD73D; padding:5px">
                                    返1111
                            </div>
                           </div> -->
                            <div style="display: flex;">
                                <div style="flex: 1 1 0%;">
                                    <div class="price display-1">
                                        <div style="display: flex;" class="flex-align-c">

                                            <span class="text" v-if="custormItemData.style.price === '1'">
                                                <span>￥{{custormItemData.params.choostype != '1'?'20':_citem.edit?_citem.edit.price:_citem.goods_price}}
                                                    <img v-if="_citem.is_member_price == 1" style="position:relative; display: inline-flex;margin-left:5px;height: 20px;vertical-align: text-bottom;" src="@/assets/custorm_style/vipIcon.png" />

                                                </span>
                                            </span>

                                            <!-- <div style="background:#FFD73D; padding:2px;font-size:5px;border-radius:3px" v-if="custormItemData.style.charges === '1'">
                                                     <span style="color:#333;">{{custormItemData.style.commission}}</span><span style="color:#fd463e;">￥1111</span>
                                            </div> -->
                                        </div>

                                        <span v-if="custormItemData.style.buybtn == '1' && custormItemData.style.buybtnstyle == '1'" class="buy buybtn1 display-1" :style="{top:0}">{{custormItemData.style.btntext}}</span>
                                        <span v-if="custormItemData.style.buybtn == '1'&&custormItemData.style.buybtnstyle == '2'" class="buy buybtn2 display-1">{{custormItemData.style.btntext}}</span>
                                         <img src="./../../assets/custorm_style/cart.png"  v-if="custormItemData.style.cart == '1'" alt=""  width="50"  style="position: absolute;top: -11px;right: 0;">
                                    </div>
                                    <div class="sold display-1 flex-row flex-align-c flex-justify-b" style="margin-top: 5px;">
                                        <span>
                                            <span class="line-through" v-if="custormItemData.style.line_price === '2'">￥{{custormItemData.params.choostype != '1'?'20':_citem.edit?_citem.edit.oldprice:_citem.line_price}}</span>
                                        </span>
                                        <span>
                                            <span v-if="custormItemData.style.goods_sales === '2'">{{custormItemData.params.choostype != '1'?'0':_citem.edit?_citem.edit.sales:_citem.goods_sales}}人购买</span>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div :style="{'padding':custormItemData.style.margincol+'px '+custormItemData.style.marginrow+'px'}" v-if="custormItemData.style.display == '1-1'">
            <div class="es-goods-header flex-row flex-align-c flex-justify-b">
                <div class="flex-col">
                    <span class="title">{{custormItemData.style.title}}</span>
                    <span class="sub-title">{{custormItemData.style.subtitle}}</span>
                </div>
                <p class="count-num" v-if="custormItemData.data"><span>{{custormItemData.data.length}}</span>/5</p>
            </div>
            <div class="es-goods-group  one block" v-for="(_citem, _cindex) in (custormItemData.params.choostype == '2'||custormItemData.params.choostype == '3')? custormItemData.params.listitem:custormItemData.data && custormItemData.data.length>0?custormItemData.data:custormItemData.params.defaultData" :key="_cindex" v-if="_cindex === 0">
                <div>
                    <div class="es-goods-item">

                        <div :class="['image',custormItemData.style.icon=='2'?'showIcon':'']" style="overflow:hidden">
                            <div class="qglist-i-t-bar" v-if="custormItemData.style.user === '1'">
                                <div class="qglist-i-t-bar-d">
                                    <div class="qglist-i-t-bar-l">
                                        <svg-icon icon-class="flame" style="margin-right:5px;" />参与
                                    </div>
                                    <div class="qglist-i-t-bar-r">

                                    </div>
                                </div>
                            </div>

                            <!-- <i v-if="custormItemData.style.icon=='2'" class="icon-attr" v-bind:style="{'background-image':`url(${getPath('common_label2.png')})`}">{{custormItemData.style.icontext}}</i> -->
                            <div v-bind:style="{'height': '175px','background-image': `url(${custormItemData.params.choostype != '1'?getPath('default_picture.png'):_citem.edit?getPath(_citem.edit.thumb):_citem.file_path})`}">
                                  <img src="../../assets/image/yishouqing.png" v-if="custormItemData.params.soldout=='1'" style="position: absolute;">
                            </div>
                        </div>
                        <div class="detail">
                           <div style="display: flex;">
                                <div class="name line-hide display-1" style="margin-bottom:10px;" v-if="custormItemData.style.name === '1'">
                                    <i class="icon-tip" v-if="custormItemData.style.icon=='2'">{{custormItemData.style.icontext}}</i>
                                    {{custormItemData.params.choostype != '1'?'这里是商品标题':_citem.edit?_citem.edit.name:_citem.goods_name}}
                                </div>
                           </div>
                            <div style="display: flex;">
                                <div style="flex: 1 1 0%;">
                                    <div class="price display-1">
                                        <span class="text" v-if="custormItemData.style.price === '1'"><span>￥{{custormItemData.params.choostype != '1'?'20':_citem.edit?_citem.edit.price:_citem.goods_price}}<img v-if="_citem.is_member_price == 1" style="display: inline-flex;margin-left:5px;height: 20px;vertical-align: text-bottom;" src="@/assets/custorm_style/vipIcon.png" /></span></span>
                                        <span v-if="custormItemData.style.buybtn == '1' && custormItemData.style.buybtnstyle == '1'" class="buy buybtn1 display-1" :style="{top:0}">{{custormItemData.style.btntext}}</span>
                                        <img src="./../../assets/custorm_style/cart.png" v-if="custormItemData.style.cart == '1'" alt="" width="50" style="position: absolute;bottom: -11px;right: 0;">
                                        <!-- <span
                                        v-if="custormItemData.style.buybtn == '1'&&custormItemData.style.buybtnstyle == '3'"
                                        class="buy buybtn3 display-1"
                                    ><i class="icon icon-cart"></i></span> -->
                                        <!-- <span v-if="custormItemData.style.buybtn == '1'&&custormItemData.style.buybtnstyle == '2'" class="buy buybtn2 display-1">{{custormItemData.style.btntext}}</span> -->
                                    </div>
                                    <div class="sold display-1 flex-row flex-align-c flex-justify-b" style="margin-top: 5px;">
                                        <span>
                                            <span class="line-through" v-if="custormItemData.style.line_price === '2'">￥{{custormItemData.params.choostype != '1'?'20':_citem.edit?_citem.edit.oldprice:_citem.line_price}}</span>
                                        </span>
                                        <span>
                                            <span v-if="custormItemData.style.goods_sales === '2'">{{custormItemData.params.choostype != '1'?'0':_citem.edit?_citem.edit.sales:_citem.goods_sales}}人购买</span>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- v-if="custormItemData.style.display == '1'" -->
        <div :style="{'padding':custormItemData.style.margincol+'px '+custormItemData.style.marginrow+'px'}" v-if="custormItemData.style.display == '2'" v-for="(_citem, _cindex) in custormItemData.params.choostype == '2'||custormItemData.params.choostype == '3'? custormItemData.params.listitem:custormItemData.data && custormItemData.data.length>0?custormItemData.data:custormItemData.params.defaultData" :key="_cindex">
            <div class="es-goods-group  list">
                <div>
                    <div class="es-goods-item">
                        <div :class="['image display-2',custormItemData.style.icon=='2'?'showIcon':'']">
                            <!-- <i class="icon-attr" v-if="custormItemData.style.icon == '2'" v-bind:style="{'background-image':`url(${getPath('common_label2.png')})`}">{{custormItemData.style.icontext}}</i> -->
                            <div
style="position:absolute;top:0px; background:linear-gradient(50deg,rgba(255,68,68,1) 0%,rgba(253,113,55,1) 100%); width:52px;height:20px;line-height:20px;
                                                         display:flex;color:#fff;font-size:10px;border-radius:0px 0px 5px 0px;"
                                                         v-if="custormItemData.style.charges=='1'"><div style="margin-left:4px;">{{custormItemData.style.commission}}</div>￥100</div>
                            <img :src="`${custormItemData.params.choostype != '1'?getPath('default_picture.png'):_citem.edit?getPath(_citem.edit.thumb):_citem.file_path}`">
                              <img src="../../assets/image/yishouqing.png" v-if="custormItemData.params.soldout=='1'" style="position: absolute;top:0px;">
                            </div>
                        <div class="detail">
                            <div class="name two-line-hide" v-if="custormItemData.style.name === '1'">  <span style="background:#ffd940;padding:4px 4px 0px 4px;" v-if="custormItemData.style.icon=='2'">{{custormItemData.style.icontext}}</span>{{custormItemData.params.choostype != '1'?'这里是商品标题':_citem.edit?_citem.edit.name:_citem.goods_name}}</div>
                            <div style="display: flex;">
                                <div style="flex: 1 1 0%;">
                                    <div class="price" style="margin-top: 4px;">
                                        <span class="text" v-if="custormItemData.style.price === '1'">￥<span>{{custormItemData.params.choostype != '1'?'20':_citem.edit?_citem.edit.price:_citem.goods_price}}<img v-if="_citem.is_member_price == 1" style="display: inline-flex;margin-left:5px;height: 20px;vertical-align: text-bottom;" src="@/assets/custorm_style/vipIcon.png" /></span></span>
                                        <span class="productprice" v-if="custormItemData.style.line_price === '2'">￥{{custormItemData.params.choostype != '1'?'99':_citem.edit?_citem.edit.oldprice:_citem.line_price}}</span>
                                    </div>
                                </div>
                                <span v-if="custormItemData.style.buybtn == '1'" class="buy buybtn1 display-2">{{custormItemData.style.btntext}}</span>
                                 <img src="./../../assets/custorm_style/cart.png"  v-if="custormItemData.style.cart == '1'" alt="" width="50"  style="position: absolute;bottom: -11px;right: 0;">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="es-goods-group  two block" v-if="custormItemData.style.display == '3'">
            <div>
                <div class="es-goods-item" :style="{'padding-top':`${custormItemData.style.margincol}px`,'padding-bottom':`${custormItemData.style.margincol}px`,'padding-right':`${_cindex%2 === 0 ? custormItemData.style.marginrow/2 : custormItemData.style.marginrow}px`,'padding-left': `${_cindex%2 === 0 ? custormItemData.style.marginrow : custormItemData.style.marginrow/2}px`}" v-for="(_citem, _cindex) in (custormItemData.params.choostype == '2'||custormItemData.params.choostype == '3')? custormItemData.params.listitem:custormItemData.data && custormItemData.data.length>0?custormItemData.data:custormItemData.params.defaultData" :key="_cindex">
                    <div :class="['image display-3',custormItemData.style.icon=='2'?'showIcon':'']">
                          <div
style="position:absolute;top:0px; background:linear-gradient(50deg,rgba(255,68,68,1) 0%,rgba(253,113,55,1) 100%); width:52px;height:20px;line-height:20px;
                                                         display:flex;color:#fff;font-size:10px;border-radius:0px 0px 5px 0px;"
                                                         v-if="custormItemData.style.charges=='1'"><div style="margin-left:4px;">{{custormItemData.style.commission}}</div>￥100</div>
                        <!-- <div class="icon-attr" v-if="custormItemData.style.icon == '2'" v-bind:style="{'background-image':`url(${getPath('common_label2.png')})`,'zoom': 0.7,'font-size': '26px'}">{{custormItemData.style.icontext}}</div> -->
                        <img :src="`${custormItemData.params.choostype != '1'?getPath('default_picture.png'):_citem.edit?getPath(_citem.edit.thumb):_citem.file_path}`" style="width:140px;">
                      <img src="../../assets/image/yishouqing.png" v-if="custormItemData.params.soldout=='1'" style="position: absolute;top:0px;">

                        <div class="detail display-3">
                            <div class="name line-hide display-3" v-if="custormItemData.style.name"><span style="background:#ffd940;padding:4px 4px 0px 4px;" v-if="custormItemData.style.icon=='2'">{{custormItemData.style.icontext}}</span>{{custormItemData.params.choostype != '1'?'这里是商品标题':_citem.edit?_citem.edit.name:_citem.goods_name}}</div>
                            <div style="display: flex; margin-top:10px;">
                                <div style="flex: 1 1 0%;">
                                    <div class="price" style="line-height: 1;"><span class="text" v-if="custormItemData.style.price === '1'"><span>￥{{custormItemData.params.choostype != '1'?'20':_citem.edit?_citem.edit.price:_citem.goods_price}}元<img v-if="_citem.is_member_price == 1" style="display: inline-flex;margin-left:5px;height: 20px;width:auto;vertical-align: text-bottom;" src="@/assets/custorm_style/vipIcon.png" /></span></span>
                                    </div>
                                    <div class="sold flex-row flex-align-c flex-justify-b" style="line-height: 1.5;" v-if="custormItemData.style.sales">
                                        <span>
                                            <span class="line-through" v-if="custormItemData.style.line_price === '2'">￥{{custormItemData.params.choostype != '1'?'99':_citem.edit?_citem.edit.oldprice:_citem.line_price}}</span>
                                        </span>
                                        <span>
                                            <span v-if="custormItemData.style.goods_sales === '2'">已售{{custormItemData.params.choostype != '1'?'0':_citem.edit?_citem.edit.sales:_citem.goods_sales}}</span>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="es-goods-group  two block swiper" v-if="custormItemData.style.display == '4'">
             <div>
                <div class="es-goods-item" :style="{'padding-top':`${custormItemData.style.margincol}px`,'padding-bottom':`${custormItemData.style.margincol}px`}" 
                v-for="(_citem, _cindex) in (custormItemData.params.choostype == '2'||custormItemData.params.choostype == '3')? custormItemData.params.listitem:custormItemData.data && custormItemData.data.length>0?custormItemData.data:custormItemData.params.defaultData" 
                :key="_cindex" style="padding:0 16px 0 16px;">
                    <div :class="['image display-5',custormItemData.style.icon=='2'?'showIcon':'']">
                          <div style="position:absolute;top:0px; background:linear-gradient(50deg,rgba(255,68,68,1) 0%,rgba(253,113,55,1) 100%);
                                         width:52px;height:20px;line-height:20px;display:flex;color:#fff;font-size:10px;border-radius:0px 0px 5px 0px;"
                                                         v-if="custormItemData.style.charges=='1'"><div style="margin-left:4px;">{{custormItemData.style.commission}}</div>￥100</div>
                        <!-- <div class="icon-attr" v-if="custormItemData.style.icon == '2'" v-bind:style="{'background-image':`url(${getPath('common_label2.png')})`,'zoom': 0.7,'font-size': '26px'}">{{custormItemData.style.icontext}}</div> -->
                        <img :src="`${custormItemData.params.choostype != '1'?getPath('default_picture.png'):_citem.edit?getPath(_citem.edit.thumb):_citem.file_path}`">
                      <img src="../../assets/image/yishouqing.png" v-if="custormItemData.params.soldout=='1'" style="position: absolute;top:0px;">

                        <div class="detail display-5">
                            <div class="name line-hide display-3" v-if="custormItemData.style.name"><span style="background:#ffd940;padding:4px 4px 0px 4px;" v-if="custormItemData.style.icon=='2'">{{custormItemData.style.icontext}}</span>{{custormItemData.params.choostype != '1'?'这里是商品标题':_citem.edit?_citem.edit.name:_citem.goods_name}}</div>

                            <div style="display: flex; margin-top:10px;">
                                <div style="flex: 1 1 0%;">
                                    <div class="price" style="line-height: 1;"><span class="text" v-if="custormItemData.style.price === '1'"><span>￥{{custormItemData.params.choostype != '1'?'20':_citem.edit?_citem.edit.price:_citem.goods_price}}元<img v-if="_citem.is_member_price == 1" style="display: inline-flex;margin-left:5px;height: 20px;width:auto;vertical-align: text-bottom;" src="@/assets/custorm_style/vipIcon.png" /></span></span>
                                    </div>
                                    <div class="sold flex-row flex-align-c flex-justify-b" style="line-height: 1.5;" v-if="custormItemData.style.sales">
                                        <span>
                                            <span class="line-through" v-if="custormItemData.style.line_price === '2'">￥{{custormItemData.params.choostype != '1'?'99':_citem.edit?_citem.edit.oldprice:_citem.line_price}}</span>
                                        </span>
                                        <span>
                                            <span v-if="custormItemData.style.goods_sales === '2'">已售{{custormItemData.params.choostype != '1'?'0':_citem.edit?_citem.edit.sales:_citem.goods_sales}}</span>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--三列长方形滚动  -->
        <div class="es-goods-group  two block swiper" v-if="custormItemData.style.display == '1-3'">
            <div class="es-goods-item" :style="{'padding':custormItemData.style.margincol+'px '+(custormItemData.style.marginrow/2)+'px'}" v-for="(_citem, _cindex) in (custormItemData.params.choostype == '2'||custormItemData.params.choostype == '3')? custormItemData.params.listitem:custormItemData.data && custormItemData.data.length>0?custormItemData.data:custormItemData.params.defaultData" :key="_cindex">
                <div :class="['image display-5',custormItemData.style.icon=='2'?'showIcon':'']">
                    <div
style="position:absolute;top:0px; background:linear-gradient(50deg,rgba(255,68,68,1) 0%,rgba(253,113,55,1) 100%); width:52px;height:20px;line-height:20px;
                    display:flex;color:#fff;font-size:10px;border-radius:0px 0px 5px 0px;"
v-if="custormItemData.style.charges=='1'"><div style="margin-left:4px;">{{custormItemData.style.commission}}</div>￥100</div>
                    <img :src="`${custormItemData.params.choostype != '1'?getPath('default_picture.png'):_citem.edit?getPath(_citem.edit.thumb):_citem.file_path}`">
                      <img src="../../assets/image/yishouqing.png" v-if="custormItemData.params.soldout=='1'" style="position: absolute;top:0px;">

                    <div class="detail display-5">
                        <div class="name line-hide display-3" v-if="custormItemData.style.name">
                             <span style="background:#ffd940;padding:4px 4px 0px 4px;" v-if="custormItemData.style.icon=='2'">{{custormItemData.style.icontext}}</span>
                            {{custormItemData.params.choostype != '1'?'这里是商品标题':_citem.edit?_citem.edit.name:_citem.goods_name}}
                            </div>
                        <div style="display: flex; margin-top:10px;">
                            <div style="flex: 1 1 0%;">
                                <div class="price" style="line-height: 1;"><span class="text" v-if="custormItemData.style.price === '1'"><span>￥{{custormItemData.params.choostype != '1'?'20':_citem.edit?_citem.edit.price:_citem.goods_price}}元<img v-if="_citem.is_member_price == 1" style="display: inline-flex;margin-left:5px;height: 20px;width:auto;vertical-align: text-bottom;" src="@/assets/custorm_style/vipIcon.png" /></span></span>
                                </div>
                                <div class="sold flex-row flex-align-c flex-justify-b" style="line-height: 1.5;" v-if="custormItemData.style.sales">
                                    <span>
                                        <span class="line-through" v-if="custormItemData.style.line_price === '2'">￥{{custormItemData.params.choostype != '1'?'99':_citem.edit?_citem.edit.oldprice:_citem.line_price}}</span>
                                    </span>
                                    <span>
                                        <span v-if="custormItemData.style.goods_sales === '2'">已售{{custormItemData.params.choostype != '1'?'0':_citem.edit?_citem.edit.sales:_citem.goods_sales}}</span>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 三列长方形-->
        <div class="es-goods-group  two block" v-if="custormItemData.style.display == '1-2'">
              <!-- 样式 4 -->
            <div class="es-goods-item" :style="{'padding':custormItemData.style.margincol+'px '+(custormItemData.style.marginrow/2)+'px'}" v-for="(_citem, _cindex) in (custormItemData.params.choostype == '2'||custormItemData.params.choostype == '3')? custormItemData.params.listitem:custormItemData.data && custormItemData.data.length>0?custormItemData.data:custormItemData.params.defaultData" :key="_cindex">
                <div :class="['image display-3',custormItemData.style.icon=='2'?'showIcon':'']">
                     <div
style="position:absolute;top:0px; background:linear-gradient(50deg,rgba(255,68,68,1) 0%,rgba(253,113,55,1) 100%); width:52px;height:20px;line-height:20px;
                                                         display:flex;color:#fff;font-size:10px;border-radius:0px 0px 5px 0px;"
                                                         v-if="custormItemData.style.charges=='1'"><div style="margin-left:4px;">{{custormItemData.style.commission}}</div>￥100</div>
                    <!-- <div class="icon-attr" v-if="custormItemData.style.icon == '2'" v-bind:style="{'background-image':`url(${getPath('common_label2.png')})`,'zoom': 0.7,'font-size': '26px'}">{{custormItemData.style.icontext}}</div> -->
                    <img :src="`${custormItemData.params.choostype != '1'?getPath('default_picture.png'):_citem.edit?getPath(_citem.edit.thumb):_citem.file_path}`">
                      <img src="../../assets/image/yishouqing.png" v-if="custormItemData.params.soldout=='1'" style="position: absolute;top:0px;">
                    <!-- <div :src="`${custormItemData.params.choostype != '1'?getPath('default_picture.png'):_citem.edit?getPath(_citem.edit.thumb):_citem.file_path}`"></ -->

                    <div class="detail display-3">
                        <div class="name line-hide display-3" v-if="custormItemData.style.name"><span style="background:#ffd940;padding:4px 4px 0px 4px;" v-if="custormItemData.style.icon=='2'">{{custormItemData.style.icontext}}</span>{{custormItemData.params.choostype != '1'?'这里是商品标题':_citem.edit?_citem.edit.name:_citem.goods_name}}</div>
                        <div style="display: flex; margin-top:10px;">
                            <div style="flex: 1 1 0%;">
                                <div class="price" style="line-height: 1;"><span class="text" v-if="custormItemData.style.price === '1'"><span>￥{{custormItemData.params.choostype != '1'?'20':_citem.edit?_citem.edit.price:_citem.goods_price}}元<img v-if="_citem.is_member_price == 1" style="display: inline-flex;margin-left:5px;height: 20px;width:auto;vertical-align: text-bottom;" src="@/assets/custorm_style/vipIcon.png" /></span></span>
                                </div>
                                <div class="sold flex-row flex-align-c flex-justify-b" style="line-height: 1.5;" v-if="custormItemData.style.sales">
                                    <span>
                                        <span class="line-through" v-if="custormItemData.style.line_price === '2'">￥{{custormItemData.params.choostype != '1'?'99':_citem.edit?_citem.edit.oldprice:_citem.line_price}}</span>
                                    </span>
                                    <span>
                                        <span v-if="custormItemData.style.goods_sales === '2'">已售{{custormItemData.params.choostype != '1'?'0':_citem.edit?_citem.edit.sales:_citem.goods_sales}}</span>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="es-goods-group  two block san" v-if="custormItemData.style.display == '5'">
            <div>
                <div class="es-goods-item" :style="{'padding-top':`${custormItemData.style.margincol}px`,'padding-bottom':`${custormItemData.style.margincol}px`,'padding-right':`${_cindex%2 === 0 ? custormItemData.style.marginrow/2 : custormItemData.style.marginrow}px`,'padding-left': `${_cindex%2 === 0 ? custormItemData.style.marginrow : custormItemData.style.marginrow/2}px`}" v-for="(_citem, _cindex) in (custormItemData.params.choostype == '2'||custormItemData.params.choostype == '3')? custormItemData.params.listitem:custormItemData.data && custormItemData.data.length>0?custormItemData.data:custormItemData.params.defaultData" :key="_cindex">
                    <div :class="['image display-6',custormItemData.style.icon=='2'?'showIcon':'']">
                         <div
style="position:absolute;top:0px; background:linear-gradient(50deg,rgba(255,68,68,1) 0%,rgba(253,113,55,1) 100%); width:52px;height:20px;line-height:20px;
                            display:flex;color:#fff;font-size:10px;border-radius:0px 0px 5px 0px;"
                            v-if="custormItemData.style.charges=='1'"><div style="margin-left:4px;">{{custormItemData.style.commission}}</div>￥100</div>
                        <!-- <div class="icon-attr-5" v-if="custormItemData.style.icon == '2'" v-bind:style="{'background-image':`url(${getPath('common_label2.png')})`,'zoom': 0.7,'font-size': '26px'}">{{custormItemData.style.icontext}}</div> -->
                        <img :src="`${custormItemData.params.choostype != '1'?getPath('default_picture.png'):_citem.edit?getPath(_citem.edit.thumb):_citem.file_path}`">
                        <img src="../../assets/image/yishouqing.png" v-if="custormItemData.params.soldout=='1'" style="position: absolute;top:0px;">
                        
                        <div class="detail display-6">
                            <div class="name line-hide display-3" v-if="custormItemData.style.name"><span style="background:#ffd940;padding:4px 4px 0px 4px;" v-if="custormItemData.style.icon=='2'">{{custormItemData.style.icontext}}</span>{{custormItemData.params.choostype != '1'?'这里是商品标题':_citem.edit?_citem.edit.name:_citem.goods_name}}</div>

                            <div style="display: flex; margin-top:10px;">
                                <div style="flex: 1 1 0%;">
                                    <div class="price" style="line-height: 1;">
                                        <span class="text" v-if="custormItemData.style.price === '1'">
                                            <span style="font-size:12px;">￥{{custormItemData.params.choostype != '1'?'20':_citem.edit?_citem.edit.price:_citem.goods_price}}元
                                                <img v-if="_citem.is_member_price == 1" style="display: inline-flex;margin-left:5px;height: 20px;width:auto;vertical-align: text-bottom;" src="@/assets/custorm_style/vipIcon.png" />
                                            </span>
                                        </span>
                                    </div>
                                    <!-- <div class="sold flex-row flex-align-c flex-justify-b" style="line-height: 1.5;" v-if="custormItemData.style.sales">
                                        <span>
                                            <span class="line-through" v-if="custormItemData.style.line_price === '2'">￥{{custormItemData.params.choostype != '1'?'99':_citem.edit?_citem.edit.oldprice:_citem.line_price}}</span>
                                        </span>
                                        <span>
                                            <span v-if="custormItemData.style.goods_sales === '2'">已售{{custormItemData.params.choostype != '1'?'0':_citem.edit?_citem.edit.sales:_citem.goods_sales}}</span>
                                        </span>
                                    </div> -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- <div :style="{'padding':custormItemData.style.margincol+'px '+custormItemData.style.marginrow+'px'}" style="overflow: hidden;">
        <div v-if="custormItemData.style.display == '4'" class="es-goods-group  three2 block" style="white-space: nowrap;font-size:0;">
          <div style="display:inline-block;">
            <div class="es-goods-item" v-for="(_citem, _cindex) in (custormItemData.params.choostype == '2'||custormItemData.params.choostype == '3')? custormItemData.params.listitem:custormItemData.data && custormItemData.data.length>0?custormItemData.data:custormItemData.params.defaultData" :key="_cindex">
              <div :class="['image',custormItemData.style.icon=='2'?'showIcon':'']">
                <div class="icon-attr" v-bind:style="{'background-image':`url(${getPath('common_label2.png')})`,'zoom': 0.7,'font-size': '26px'}">{{custormItemData.style.icontext}}</div>
                <img :src="`${custormItemData.params.choostype != '1'?getPath('default_picture.png'):_citem.edit?getPath(_citem.edit.thumb):_citem.file_path}`" alt="">
              </div>
              <div class="detail">
                <div class="name line-hide" style="margin-top: 0">
                  {{custormItemData.params.choostype != '1'?'这里是商品标题':_citem.edit?_citem.edit.name:_citem.goods_name}}</div>
                <div style="display: flex;">
                  <div style="flex: 1 1 0%;">
                    <div class="price"><span class="text">￥{{custormItemData.params.choostype != '1'?'20':_citem.edit?_citem.edit.price:_citem.goods_price}}</span></div>
                    <div class="sold">

                    </div>
                  </div>

                </div>
              </div>
            </div>
          </div>
        </div>
      </div> -->

        <div class="btn-edit-del" @click="delCurrent"><span class="btn-del iconfont icon icon-close"></span></div>
    </div>
</section>
</template>

<script>
import defaultConfig from './utils/showConfig'
export default {
  mixins: [defaultConfig.mixins],
  props: {
    defaultConfig: {
      type: Object,
      default: function() {
        return defaultConfig
      }
    }
  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
.custorm--modelbox.goodscol-show {
    .caption{
        .main-title span {
            display: inline-block;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: #ffd940;
            border: 1px solid transparent;
            position: relative;
            margin: 0 10px;
            }
    }
    .line-through {
        text-decoration: line-through;
    }

    .drag .btn-edit-del {
        height: 16px;
        width: 16px;
        position: absolute;
        right: 0;
        top: 0;
        display: none;
        z-index: 11;
        cursor: pointer;
        font-size: 14px;
        color: #fff;
        background: #fb6638;
        border-radius: 0 0 0 100%;
    }

    .drag .btn-edit-del .icon-close {
        font-size: 12px;
        position: absolute;
        right: 0;
        top: 0;
        left: 0;
        bottom: 0;
        text-align: right;
        line-height: 1.4;
    }

    .es-goods-item {
        position: relative;
        height: auto;
        // padding: 14px;
        background: #fff;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
    }

    .es-goods-header {
        line-height: 1;
        padding: 15px 0;

        .title {
            color: #333;
            font-weight: 600;
            font-size: 17px;
            margin-bottom: 5px;
        }

        .sub-title {
            font-size: 12px;
            color: #999;
        }

        .count-num {
            color: #333;
            font-size: 17px;

            span {
                font-size: 24px;
            }
        }
    }

    .es-goods-group.block.one .es-goods-item {
        float: none;
        padding: 0;
        width: 100%;
        box-sizing: border-box;
    }

    .es-goods-group.block .es-goods-item {
        width: 50%;
        float: left;
        border-bottom: 0;
        background: none;
        padding: 5px;
        display: block;
        border-radius: 2px;
    }
    .es-goods-group.block .es-goods-items {
        width: 33.3%;
        float: left;
        border-bottom: 0;
        background: none;
        padding: 5px;
        display: block;
        border-radius: 2px;
    }

    .es-goods-group.block .es-goods-item {
        border-radius: 4px;
    }

    .es-goods-item .image {
        float: left;
        background-size: cover;
        position: relative;
        background-repeat: no-repeat;
        background-position: 50%;

        &.display-2 {
            width: 100px;
            height: 100px;
        }
    }
    .one .es-goods-item .image.showIcon .icon-attr-5{
        width:43px;
        height:17px;
        background:linear-gradient(50deg,rgba(255,68,68,1) 0%,rgba(253,113,55,1) 100%);
        border-radius:3px 3px 0px 0px;
    }
    .one .es-goods-item .image.showIcon .icon-attr,
    .two .es-goods-item .image.showIcon .icon-attr {
        position: absolute;
        font-style: normal;
        top: -25px;
        left: 0px;
        width: 80px;
        height: 80px;
        background-size: 80px;
        z-index: 10;
        color: #fff;
        font-size: 21px;
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
        padding-right: 7px;
        line-height: 12px;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        background-position: center;
        background-repeat: no-repeat;
    }

    .es-goods-item .image.showIcon .icon-attr {
        position: absolute;
        top: -18px;
        left: -19px;
        width: 60px;
        height: 60px;
        background-size: 60px;
        white-space: nowrap;
        font-style: normal;
        z-index: 10;
        color: #fff;
        font-size: 21px;
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
        padding-right: 7px;
        line-height: 12px;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        background-position: center;
        background-repeat: no-repeat;
    }

    .es-goods-group.block .es-goods-item .image {
        width: 100%;
        height: auto;
        margin: 0;
        background-position: 50%;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .es-goods-group.block .es-goods-item .image {
        float: none;
    }

    .es-goods-group.block.one .es-goods-item .image {
        height: 175px;
        overflow: hidden;
    }

    .es-goods-group.block.one .es-goods-item .image>div:not(.qglist-i-t-bar) {
        height: 175px;
        background-size: cover;
        background-position: 50%;
    }

    .es-goods-item .detail {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
        line-height: 1.5;
        background: #fff;
        padding-left: 10px;
        display: flex;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        -webkit-box-orient: vertical;
        -ms-flex-direction: column;
        -webkit-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        -webkit-justify-content: space-between;
        justify-content: space-between;
    }

    .line-hide {
        white-space: nowrap;
    }

    .line-hide,
    .two-line-hide {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .es-goods-group .es-goods-item .detail .name {
        margin-top: 6px;
        font-size: 14px;

        &.display-1 {
            line-height: 24px;
            font-size: 16px;
            margin-top: 10px;

            .icon-tip {
                height: 24px;
                line-height: 24px;
                font-size: 12px;
                font-style: normal;
                margin-right: 5px;
                padding: 0 9px;
                background-color: #ffd93f;
                border-radius: 2px;
                display: inline-block;
            }
        }

        &.display-3 {
            line-height: 18px;
            margin-top: 10px;
            height: 35px;
            white-space: normal;
            text-overflow: ellipsis;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
    }

    .es-goods-group .es-goods-item .detail .name {
        font-size: 15px;
        color: #3d404d;
        line-height: 1;
    }

    .es-goods-group .es-goods-item .detail .subtitle {
        font-size: 12px;
        color: #999ca7;
        height: 18px;
        margin-top: 6px 0 4px;
    }

    .es-goods-item .detail .buy {
        display: inline-block;
        height: 22px;
        color: #fff;
        line-height: 22px;
        padding: 0;
        width: 32px;
        border-radius: 2px;
        text-align: center;
        border: 1px solid transparent;
        float: right;
        -webkit-align-self: flex-end;
        -ms-flex-item-align: end;
        align-self: flex-end;
    }

    .es-goods-item .detail .buy.buybtn1 {
        border: 1px solid #f55;
        background: #f55;

        &.display-1,
        &.display-2 {
            position: absolute;
            right: 0;
            width: 72px;
            height: 28px;
            line-height: 28px;
            color: #fff;
            font-size: 14px;
            text-align: center;
            font-weight: normal;
            margin: 0;
            background-color: #ff4040;
            border-radius: 4px;
        }
    }

    .es-goods-item .detail .buy.buybtn2 {
        height: 36px;
        width: auto;
        white-space: nowrap;
        line-height: 36px;
        color: #ffe200;
        font-size: 14px;
        margin: 0;
        margin-right: -22.5px;
        padding: 0 10px 0 3px;
        background-color: #2d2d2d;
        border-radius: 1px 0 5px 2px;
        position: absolute;
        top: 0;
        right: 0;
        display: inline-block;

        &.display-1,
        &.display-2 {
            &::before {
                content: "";
                width: 0;
                height: 0;
                border-width: 18px;
                border-style: solid;
                border-color: transparent #2d2d2d transparent transparent;
                position: absolute;
                top: 0;
                left: -35px;
            }

            &:after {
                content: "";
                width: 2px;
                height: 2px;
                border-width: 7.5px;
                border-style: solid;
                border-color: transparent transparent transparent #2d2d2d;
                position: absolute;
                top: -7px;
                right: -7px;
            }
        }
    }

    .es-goods-group .es-goods-item .detail .sold {
        color: #999;
    }

    .es-goods-item .detail .sold {
        font-size: 11px;
        color: #999;

        &.display-1 {
            color: #999;
            font-size: 12px;
            margin: 0;
            margin-top: 3px;
        }
    }

    .es-goods-item .detail .price {
        &.display-1 {
            position: relative;
            color: #ff4040;
            font-size: 20px;
            font-weight: 600;
            margin: 0;
            -webkit-flex-shrink: 1;
            flex-shrink: 1;

            .text span {
                overflow: hidden;
                font-size: 20px;
                text-overflow: ellipsis;
                white-space: normal;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 1;
            }
        }

        .text {
            color: #fd463e;
            font-weight: 700;
        }
    }

    .es-goods-item .detail .price .text span {
        font-size: 16px;
    }

    .es-goods-group.block .es-goods-item .detail {
        padding: 8px;
        // overflow: hidden;
        line-height: 1.5;

        &.display-3 {
            padding: 0;
        }
    }

    .es-goods-group.block .es-goods-item .detail .productprice {
        height: 24px;
        line-height: 24px;
    }

    .es-goods-item .detail .price .productprice {
        text-decoration: line-through;
    }

    .es-goods-group .es-goods-item .detail .productprice {
        width: 100%;
        color: #999;
        font-size: 11px;
        overflow: hidden;
    }

    .es-goods-item .detail .price .productprice {
        color: #999;
        font-size: 12px;
    }

    .es-goods-group:after {
        display: block;
        overflow: hidden;
        visibility: hidden;
        width: 0;
        height: 0;
        content: "";
        clear: both;
    }

    .es-goods-item .detail .buy.buybtn3 i {
        font-size: 20px;
        line-height: 0;
    }

    // 切换
    .es-goods-item .detail .buy.buybtn6 {
        vertical-align: middle;
        width: 22px;
        height: 22px;
        text-align: center;
        line-height: 22px;
        border-radius: 50%;
        color: #fff;
        background: #f55;
    }

    .es-goods-item .detail .buy.buybtn3 {
        color: #f55;
        vertical-align: middle;
        width: 22px;
        padding: 0;
        text-align: center;
        line-height: 22px;
    }

    // 第二个列表
    .es-goods-group {
        height: auto;
        background: #ffffffff;
    }

    .list {
        -webkit-box-flex: 1;
        -webkit-flex: 1 1 auto;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .es-goods-item .image img {
        height: 100%;
        width: 100%;
        max-width: 100%;
        max-height: 100%;
        display: block;
    }

    .es-goods-group.list .es-goods-item .detail {
        width: 0;
        overflow: hidden;
    }

    .es-goods-item .detail {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
        line-height: 1.5;
        background: #fff;
        padding-left: 10px;
        display: flex;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        -webkit-box-orient: vertical;
        -ms-flex-direction: column;
        -webkit-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        -webkit-justify-content: space-between;
        justify-content: space-between;
    }

    .es-goods-group .es-goods-item .detail .subtitle {
        font-size: 12px;
        color: #999ca7;
        height: 18px;
        margin-top: 6px 0 4px;
    }

    .list .es-goods-item .detail .price {
        position: static;
    }

    .es-goods-group.block.three2 .es-goods-item {
        width: 100px;
        box-sizing: border-box;
    }

    .es-goods-group.block .es-goods-item .image {
        float: none;
    }

    .es-goods-item .image {
        float: left;
        background-size: cover;
        position: relative;
        background-repeat: no-repeat;
        background-position: 50%;
    }

    .es-goods-group.block {
        .es-goods-item .image {
            .img {
                height: 100%;
                width: 100%;
                max-width: 100%;
                max-height: 100%;
                display: block;
            }

            &.display-3 {
                img {
                    width: 176.5px;
                    height: 130px;
                    object-fit: cover;
                    margin: 0 auto;
                    border-radius: 10px;
                    display: block;
                }
            }
            &.display-5 {
                img {
                    width: 176.5px;
                    height: 120.5px;
                    object-fit: cover;
                    border-radius: 10px;
                    display: block;
                }
            }
            &.display-6{
                img{
                    width: 100px;
                    height: 100px;
                    object-fit: cover;
                    border-radius: 10px;
                    display: block;
                }
            }
        }
    }

    .es-goods-group.block.three2 .es-goods-item {
        width: 100px;
    }

    .es-goods-group.block.three2 .es-goods-item img {
        height: 90px;
    }

    .es-goods-group.block.three2 {
        .es-goods-item .detail .price .text {
            color: #fd463e;
            font-weight: 700;
        }

        .es-goods-item .detail .price .text {
            color: #f55;
            font-size: 13px;
        }

        .es-goods-group.three .es-goods-item .price .text span {
            font-size: 12px;
        }

        .es-goods-item .detail .price .text span {
            font-size: 16px;
        }

        .es-goods-item .detail .buy.buybtn1 {
            border: 1px solid #f55;
            background: #f55;
        }

        .es-goods-item .detail .buy.buybtn3 {
            color: #f55;
            vertical-align: middle;
            width: 22px;
            padding: 0;
            text-align: center;
            line-height: 22px;
        }

        .es-goods-item .detail .buy.buybtn6 {
            vertical-align: middle;
            width: 20px;
            text-align: center;
            line-height: 20px;
            border-radius: 50%;
            color: #fff;
            background: #f55;
        }

        .es-goods-item .detail .buy {
            display: inline-block;
            height: 20px;
            color: #fff;
            line-height: 20px;
            padding: 0;
            width: 32px;
            border-radius: 2px;
            text-align: center;
            border: 1px solid transparent;
            float: right;
            font-size: 12px;
            -webkit-align-self: flex-end;
            -ms-flex-item-align: end;
            align-self: flex-end;
        }

        .es-goods-group:after {
            display: block;
            overflow: hidden;
            visibility: hidden;
            width: 0;
            height: 0;
            content: "";
            clear: both;
        }
    }

    .es-goods-group.block.two.swiper {
        white-space: nowrap;
        overflow: hidden;
        vertical-align: middle;

        .es-goods-item {
            display: inline-block;
            float: none !important;
            width: 38%;
            vertical-align: middle;

            .display-3 img {
                width: 157.8px;
                height: 157.8px;
                margin: 0 auto;
            }

            .display-5 img {
                width: 157.8px;
                height: 110px;
            }
        }
    }
     .es-goods-group.block.two.san{

        .es-goods-item {
            display: inline-block;
            float: none !important;
            width: 33.33%;
            vertical-align: middle;

            .display-3 img {
                width: 157.8px;
                height: 157.8px;
                margin: 0 auto;
            }

            .display-5 img {
                width: 157.8px;
                height: 110px;
            }
        }
     }

    .es-goods-group.block.three2 .es-goods-item .detail .price {
        position: relative;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        font-size: 14px;
    }

    .es-goods-group .es-goods-item .detail .name {
        font-size: 13px;
        color: #3d404d;
        line-height: 1;
    }

    .es-goods-group.three .es-goods-item.active {
        width: 135px;
    }

    .es-goods-group.block.three2 {
        width: 9999px;
    }

    .qglist-i-t-bar {
        line-height: 36px;
        background: -webkit-linear-gradient(90deg, #ff7e42, #fb2f52);
        background: linear-gradient(90deg, #ff7e42, #fb2f52);
        border-radius: 70px 0 0 70px;
        box-sizing: initial;
        position: absolute;
        top: -36px;
        padding-top: 36px;
        right: 0;

        .qglist-i-t-bar-d {
            display: -webkit-flex;
            display: flex;
            justify-content: flex-start;

            .qglist-i-t-bar-l {
                color: #fff;
                font-size: 14px;
                padding: 0 20px 0 15px;

                .qglist-i-t-bar-l .i {
                    font-size: 16px;
                    vertical-align: -1px;
                    margin-right: 4px;
                    display: inline;
                }

                .qglist-i-t-bar-l .em {
                    font-style: normal;
                    font-weight: 600;
                    display: inline;
                }
            }

            .qglist-i-t-bar-r {
                padding: 5.4px 10px 5.4px 0;
            }
        }
    }
}
</style>
